@import '../../ui/base'
@import './config'

.textarea
	width 100%
	min-height 77px
	border 0
	resize none
	padding 10px
	background-color transparent
	&[disabled]
		color #bbb
.input 
	width 100%
	height 30px
	padding 0 10px
	border 0
	resize none
	background-color transparent
	&[disabled]
		color #bbb
.root
	width $width
	height $height
	border-bottom 1px solid #d5e1eb
	position relative
	&.error
		.msg
			display block
	&.filled
		.label
			font-size $label-small-size
			top -20px
			color $font-blue
	.label
		bottom 0
		color rgba(0,0,0,.26)
		color $font-color
		font-size $label-size
		left 0
		right 0
		pointer-events none
		position absolute
		display block
		top -4px
		width 100%
		overflow hidden
		white-space nowrap
		text-align left
		transition-property top, font-size
		transition-timing-function cubic-bezier(.4,0,.2,1)
		transition-duration .2s
	.msg
		position absolute
		bottom -22px
		font-size 12px
		left 0
		color red
		display none
	input
		-webkit-appearance none
		border none
		outline none
		width 100%
	&.active
		&::before
			width 100%
			left 0
		.label
			top -20px
			color $font-blue
			font-size $label-small-size
			visibility visible
	&::before
		width 0
		height 1px
		position absolute
		content ''
		background-color $font-blue
		transition-property left, width
		transition-duration .2s
		bottom 0
		left 45%

.attr
	position: absolute;
	right: 0;
	margin-right: -62px;
	background: #ced8e2
	color: #fff;
	width: 39px;
	height: 18px;
	line-height: 18px;
	text-align: center;
	font-size 12px


.root
	[disabled]
		color #bbb
